<h1>PM2 Process Monitor</h1>
<ul class="nav nav-tabs" ng-controller="HostListController" ng-hide="tabs.length == 1">
	<li ng-repeat="tab in tabs" ng-class="{active: tab.selected}">
		<a ng-click="changeHost(tab.title)" data-toggle="tab">{{tab.title}}</a>
	</li>
</ul>
<section class="system" ng-controller="SystemController">
	<h2>{{hostData.system.hostname}}</h2>
	<alert ng-hide={{hostData.pm2.compatible}} class="alert-error" type="error">The version of pm2 running on {{hostData.system.hostname}} is incompatible with pm2-web {{pm2WebVersion}} - please upgrade pm2 to {{pm2VersionRequired}} or higher.</alert>
	<table class="table" ng-show={{hostData.pm2.compatible}}>
		<thead>
			<tr>
				<th>Processes</th>
				<th>CPUs</th>
				<th>Load</th>
				<th>Uptime</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{{hostData.processes.length}}</td>
				<td>{{hostData.system.cpu_count}}</td>
				<td><span ng-repeat="load in hostData.system.load track by $index">{{load | decimalPlaces:2}}</span></td>
				<td>{{hostData.system.uptime | humanise}}</td>
			</tr>
		</tbody>
	</table>
	<figure id="memory" ng-show={{hostData.pm2.compatible}}>
		<figcaption>Memory ({{hostData.system.memory.total | memory}} total)</figcaption>
		<div style="width: {{(hostData.system.memory.free / hostData.system.memory.total) * 100}}%">{{hostData.system.memory.free | memory}} Free</div><div style="width: {{100 - ((hostData.system.memory.free / hostData.system.memory.total) * 100)}}%">{{hostData.system.memory.used | memory}} Used</div>
	</figure>
</section>
<section class="processes" ng-controller="ProcessListController" ng-show={{hostData.pm2.compatible}}>
	<h2>Processes</h2>
	<p class="noprocesses" ng-show="processes.length == 0">There are no processes running.</p>
	<article ng-repeat="process in processes">
		<ul class="information" ng-class="{'reloading': process.reloading, 'erroring': process.throwing}">
			<li class="pid">
				<h3>PID</h3>
				<p ng-click="toggleDetails(process.id)">{{process.pid}}</p>
			</li>
			<li class="script">
				<h3>Name</h3>
				<p ng-click="toggleDetails(process.id)">{{process.name}}</p>
			</li>
			<li class="restarts">
				<h3>Restarts</h3>
				<p ng-click="toggleDetails(process.id)">{{process.restarts}}</p>
			</li>
			<li class="uptime">
				<h3>Uptime</h3>
				<p ng-hide="process.status == 'online'" ng-click="toggleDetails(process.id)">N/A</p>
				<p ng-show="process.status == 'online'" ng-click="toggleDetails(process.id)">{{process.uptime | humanise}}</p>
			</li>
			<li class="status {{process.status}}">
				<h3>Status</h3>
				<p ng-click="toggleDetails(process.id)">
					<i title="Online" ng-show="process.status == 'online'" class="icon-ok-circle {{process.status}}"></i>
					<i title="Stopping" ng-show="process.status == 'stopping'" class="icon-ban-circle {{process.status}}"></i>
					<i title="Stopped" ng-show="process.status == 'stopped'" class="icon-ban-circle {{process.status}}"></i>
					<i title="Error!" ng-show="process.status == 'errored'" class="icon-exclamation-sign {{process.status}}"></i>
					<i title="Launching" ng-show="process.status == 'launching'" class="icon-repeat {{process.status}}"></i>
				</p>
			</li>
			<li class="cpu">
				<h3>CPU</h3>
				<p ng-click="toggleDetails(process.id)">{{process.cpu | decimalPlaces:2}}%</p>
			</li>
			<li class="memory">
				<h3>Memory</h3>
				<p ng-click="toggleDetails(process.id)">{{process.memory | memory}}</p>
			</li>
			<li class="actions">
				<h3>Actions</h3>
				<p ng-click="toggleDetails(process.id)">
					<a class="icon-play" title="Start process" ng-hide="process.status == 'online'"  ng-click="start(process.id, $event)"></a>
					<a class="icon-remove" title="Stop process" ng-hide="process.status != 'online'" ng-click="stop(process.id, $event)"></a>
					<a class="icon-refresh" title="Restart process" ng-hide="process.status != 'online'" ng-click="restart(process.id, $event)"></a>
					<a class="icon-repeat" title="Reload process" ng-hide="process.status != 'online'" ng-click="reload(process, $event)" ng-show="process.mode == 'cluster'"></a>
					<a class="icon-bug" title="Debug process" ng-show="debugEnabled && process.status == 'online'" ng-click="debug(process, $event)"></a>
				</p>
			</li>
		</ul>
		<div class="details" ng-show="showDetails[process.id]">
			<h3>Executable</h3>
			<p title="{{process.script}}" class="executable">{{process.script}}</p>
			<h3>Resources</h3>
			<dl class="legend">
				<dt class="cpu">CPU</dt>
				<dd>CPU</dd>
				<dt class="memory">Memory</dt>
				<dd>Memory</dd>
			</dl>
			<figure resourceusage data="process.usage" style="display: block; width: 100%; height: 300px; margin: 10px 0 30px 0"></figure>
			<h3>Logs</h3>
<!--			<div class="btn-group">
				<button ng-click="clearLogs(process)" class="btn btn-default btn-sm">Clear</button>
			</div> -->
			<ul scrollglue>
				<li ng-repeat="log in process.logs" class="{{log.type}}" ng-bind-html="log.data | ansiToHtml" />
			</ul>
		</div>
	</article>
</section>